import Taro, { Component } from '@tarojs/taro'
import { Image, View, Swiper, SwiperItem, Text } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'

interface IProps {
  type?: string
}


const calcAfter = function (key, length) {
  return key > length - 1 ? key - length : key
}

const calcBefore = function (key, length) {
  return key < 0 ? length - 1 : key
}

export default class UserRecord extends Component<IProps, {}> {
  state: any
  props: any

  constructor() {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }

  static options = {
    addGlobalClass: true
  }

  //  滑块视图容器
  onChange(e) {
    this.setState({
      current: e.target.current,
    })
  }

  render() {
    const prefixCls = 'buy-record'
    const { current } = this.state
    const { className, list=[] } = this.props
    const length = list.length
    return (<Swiper
      autoplay
      circular
      className={classNames(prefixCls, className)}
      duration={800}
      displayMultipleItems={4}
      interval={2000}
      vertical
      onChange={this.onChange.bind(this)}>
      {
        list.map((user, key) => {
          return (<SwiperItem key={key} className={classNames(`${prefixCls}-item`, {
            [`${prefixCls}-subtract-one`]: key === calcBefore(current - 1, length),
            [`${prefixCls}-current`]: key === current,
            [`${prefixCls}-add-one`]: key === calcAfter(current + 1, length),
            [`${prefixCls}-add-two`]: key === calcAfter(current + 2, length),
            [`${prefixCls}-add-three`]: key === calcAfter(current + 3, length),
          })}>
            <View className={`${prefixCls}-user f-g-4`}>
              <Image src={user.headImg} className={`${prefixCls}-avatar`}/>
              <Text className={`${prefixCls}-text t-o-e`}>{user.nickName}购买了 {user.productName}</Text>
            </View>
          </SwiperItem>)
        })
      }
    </Swiper>)
  }
}
